<template>
	<view class="bind_wx">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top title="绑定微信"></tab-top>
		<!-- #endif -->
		<view class="content">
			<view class="box">
				<image class="box_icon" src="/static/icon/bind-wx.png" mode=""></image>
				<image class="logo_icon" src="/static/1024logo.png" mode=""></image>
				<image class="wx_icon" src="/static/icon/wx_icon.png" mode=""></image>
			</view>
			<view class="btn" @tap="bindWx">立即绑定</view>
		</view>
	</view>
</template>

<script>
	
	export default{
		
		data() {
			return {
				key: ''
			}
		},
		methods: {
		 	async bindWx(){
				uni.showLoading();
				let wxRes,wxInfo,res;
				wxRes= await this.getWxLogin();
				if(wxRes) wxInfo = await this.getWxInfo();
				if(wxInfo) res = await this.bindToWx(wxInfo);
				console.log(res);
				if(res.status == 1){
					uni.showToast({
						icon:"none",
						title:"微信绑定成功"
					});
					setTimeout(function(){
						uni.navigateBack({
							delta: 1
						});
					},1500)
					
				}else{
					uni.showToast({
						icon:"none",
						title:res.message
					});
				}
				uni.hideLoading();
			},
			getWxLogin(){
				return new Promise((res)=>{
					uni.login({
						provider: 'weixin',
						success: (result) => {
							console.log(JSON.stringify(result));
							// 更新保存在 store 中的登录状态
							res(result);
					
						},
						fail: (error) => {
							res(false)
							console.log('login fail:', err);
						}
					});
				});
			},
			/**
			 * 获取用户微信信息
			 */
			getWxInfo() {
				return new Promise((res)=>{
					uni.getUserInfo({
						provider: 'weixin',
						success: (result) => {
							console.log(JSON.stringify(result));
							res(result.userInfo);
						},
						fail: (error) => {
							res(false);
							console.log('getUserInfo fail', error);
							let content = error.errMsg;
							if (~content.indexOf('uni.login')) {
								content = '请在登录页面完成登录操作';
							}
							uni.hideLoading();
							uni.showModal({
								title: '获取用户信息失败',
								content: '错误原因' + content,
								showCancel: false
							});
						}
					});
				});	
			},
			/**
			 * 绑定微信
			 */
			bindToWx(info){
				return new Promise((res)=>{
					this.req({
						url:'user/userBindWx',
						method:'post',
						data:{
							open_id:info.openId,
							gender:info.gender,
							province:info.province,
							city:info.city,
							country:info.country,
							avatarUrl:info.avatarUrl,
							unionId:info.unionId,
							uid:this.isLogin().id,
							username:info.nickName
						}
					},(data)=>{
						res(data.data);
					})
				});
			}
		},
		mounted(){
			
		},
		computed:{
			
		}
	}
</script>

<style scoped lang="scss">
	.content{
		box-sizing: border-box;
		padding-top: 179upx;
		.box{
			 width: 619upx;
			 height: 339upx;
			 margin: 0 auto;
			 position: relative;
			 .box_icon{
				 width: 100%;
				 height: 100%;
			 }
			 .logo_icon{
				 width: 120upx;
				 height: 120upx;
				 padding: 30upx;
				 background: #3595f9;
				 position: absolute;
				 left: 82upx;
				 border-radius: 50%;
				 top: 84upx;
			 }
			 .wx_icon{
				 position: absolute;
				 width: 86upx;
				 height: 86upx;
				 top: 128upx;
				 right: 56upx;
			 }
		}
		.btn{
			margin: 0 auto;
			margin-top: 202upx;
			width: 540upx;
			height: 90upx;
			background-color: #3595f9;
			border-radius: 8upx;
			text-align: center;
			line-height: 90upx;
			color: #FFFFFF;
			font-size: 32upx;
		}
	}
</style>
